<template>
	<div>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>商品列表</span>
			</div>
			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="img_md" label="商品名称" width='70'>
					<template slot-scope='scope'>
						<img :src="scope.row.img_md" width='60'>
					</template>
				</el-table-column>
				<el-table-column prop="name" label="" width='450'>
				</el-table-column>
				<el-table-column prop="price" label="价格" sortable>
				</el-table-column>
				<el-table-column prop="inventory" label="库存" sortable>
				</el-table-column>
				<el-table-column prop="create_time" label="发布时间" sortable>
				</el-table-column>
				<el-table-column label="操作" width="180">
					<template slot-scope='scope'>
						<router-link :to="{name:'GoodsEdit',params:{id:scope.row.id}}">
							<el-button size="mini" type="primary" icon="el-icon-edit" plain></el-button>
						</router-link>
						<!-- <el-link :href="`#/article/edit/${scope.row.id}`" >
						<el-button type="primary" icon="el-icon-edit" plain>编辑</el-button>
					</el-link> -->
						<el-button size="mini" type="danger" icon="el-icon-delete" plain
							@click='handleRemove(scope.row.id,scope.$index)'></el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				 :page-sizes="[4,8,16,32]" :page-size="5" background class="page"
				layout=" prev, pager, next, sizes,total" :total='20'>
			</el-pagination>
		</el-card>

	</div>
</template>

<script>
	import { Goods } from '@/api/';
	export default {
		data() {
			return {
				tableData: [],

				form:{
				pageSize: 4, 
				pageIndex: 1,	
				},
			}
		},
		created() {
			this.loadList();
		},
		methods: {
			handleSizeChange(val) {
				this.form.pageSize = val
				this.form.pageIndex = 1
				console.log(`每页 ${val} 条`);
				this.loadList();
			},
			handleCurrentChange(val) {
				this.form.pageIndex = val
				console.log(`当前页: ${val}`);
				this.loadList();
			},
			async loadList() {
				let { status, goods, total } = await Goods.list({...this.form });
				
				if (status) {
					this.tableData = goods;
				}
			},
			handleRemove(id, i) {
				
				this.$confirm('此操作将永久删除商品，是否继续', { type: 'warning' })
					.then(async () => {
						//ajax
						let { status, msg } = await Goods.remove({id});

						if (status) {
							// 跟新DOM
							this.tableData.splice(i, 1);
							this.$message.success('删除成功');
						}
					})
					.catch(() => {
						this.$message.info('取消成功')
					})
			},
			
		},
		computed:{
			total(){
				return this.tableData.length - 1;
			}
		}
	}
</script>

<style lang="less" scoped>
.page{
	padding-top: 15px;
	display: flex;
	justify-content: flex-end;
}
</style>
